<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <!-- 页面图标 -->
    <link href="../img/bg/pobaiLogo.png" rel="icon" type="image/x-ico">

    <!-- lib库 -->
    <script src="../lib/jquery-3.5.1.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <!-- 公共类 -->
    <link rel="stylesheet" href="../css/com.css">
    
    <link rel="stylesheet" href="../css/index.css">
    
</head>
<body>
  <!-- 背景 -->
<div class="back"></div>
    <!-- 导航栏 -->
<nav id="nav" class="navbar navbar-default navbar-inverse">
  <div class="container">
      <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                  data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="./index.html">首页</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                  <li><a href="zhenrong.html">阵容推荐</a></li>
                  <li><a href="hero.html">英雄</a></li>
                  <li><a href="./equip.html">装备</a></li>
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                          aria-haspopup="true" aria-expanded="false">羁绊 <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="race.html">种族</a></li>
                          <li><a href="occupation.html">职业</a></li>
                      </ul>
                  </li>
              </ul>

              <ul class="nav navbar-nav navbar-right">
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                          aria-haspopup="true" aria-expanded="false">友情链接 <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="https://www.bilibili.com">BiliBili</a></li>
                          <li><a href="https://lol.qq.com/">LOL</a></li>
                          <li><a href="https://cn.vuejs.org/">Vue</a></li>
                          <li><a href="https://www.bootcss.com/">Bootstrap</a></li>
                      </ul>
                  </li>
                  <img src="../img/bg/logo.png" id="navLogo">
              </ul>
          </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
  </div>
</nav>
<!-- 开场视频 -->
    <video id="video" x5-video-player-type="h5-page" autoplay="autoplay" width="100%" height="100%" style="display: block;" preload="auto" x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true" src="../img/迷雾之源.mp4">
    </video>
<!-- 主体 -->
        <div id="inWeb">
            <div class="container">
                <h1>迷雾下藏着的破败之谜从未被揭开</h1><br>
                <h2>现在，请你，在迷雾中摸索光明</h2><br>
                <p><a class="btn btn-primary btn-lg" href="./zhenrong.html" role="button">点击探索</a></p>
            </div> 

            
            <div class="container" id="firendLink">
                <hr>
                <h2>友情链接</h2>
                <div class="row">
                    <div class="col-sm-6 col-md-3 firendLink_box"  >
                      <div class="thumbnail">
                        <img src="../img/bg/Bilibili.jpg" class="firendLink_Logo">
                        <div class="caption">
                          <h3>BiliBili</h3>
                          <p><a href="https://www.bilibili.com/" class="btn btn-primary" role="button">进入官网</a> </p>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-6 col-md-3 firendLink_box">
                        <div class="thumbnail">
                          <img src="../img/bg/vue.jpeg" class="firendLink_Logo">
                          <div class="caption">
                            <h3>Vue</h3>
                            <p><a href="https://cn.vuejs.org/" class="btn btn-primary" role="button">进入官网</a> </p>
                          </div>
                        </div>
                      </div>

                      <div class="col-sm-6 col-md-3 firendLink_box">
                        <div class="thumbnail">
                          <img src="../img/bg/bootstrap.png" class="firendLink_Logo">
                          <div class="caption">
                            <h3>Bootstrap</h3>
                            <p><a href="https://www.bootcss.com/" class="btn btn-primary" role="button">进入官网</a> </p>
                          </div>
                        </div>
                      </div>

                      <div class="col-sm-6 col-md-3 firendLink_box">
                        <div class="thumbnail">
                          <img src="../img/bg/LOL_new.jpg" class="firendLink_Logo">
                          <div class="caption">
                            <h3>英雄联盟</h3>
                            <p><a href="https://lol.qq.com/" class="btn btn-primary" role="button">进入官网</a> </p>
                          </div>
                        </div>
                      </div>
                  </div>
            </div>
          </div> 
</body>
<script src="../js/index.js"></script>
</html>